<template>
  <header class="header-flex">
    <template v-if="isSerch">
      <van-search placeholder="请输入商品名称" v-model="value" class="header-search" />
      <van-icon name="chat" class="header-chat" />
    </template>
    <template v-else>
      <van-icon
        v-if="hasBack"
        name="arrow-left" class="header-left"
        @click="$router.go(-1)"/>
      <span  v-if="left.length" class="header-left">历史记录</span>
      <span class="header-title ellipsis">{{title}}</span>
      <div class="header-right"
        v-if="right.length"
        @click="click-right">哈哈</div>
    </template>
  </header>
</template>

<script>
import { Search, Icon } from 'vant'
export default {
  name: 'myHeader',
  props: {
    isSerch: {
      type: Boolean,
      default: false
    },
    hasBack: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: '标题'
    },
    left: {
      type: String,
      default: ''
    },
    right: {
      type: String,
      default: ''
    }
  },
  components: {
    [Search.name]: Search,
    [Icon.name]: Icon
  },
  data () {
    return {
      value: ''
    }
  },
  methods: {
    clickRight () {
      this.$emit('clickRight')
    }
  }
}
</script>

<style lang="stylus" scoped>
  .header-flex
    position fixed
    width 100%
    height 42Px
    line-height 42Px
    top 0
    left 0
    right 0
    z-index 999
    display flex
    justify-content space-between
    background rgb(242, 242, 242)
    align-items center
  .header-search
    flex 1
  .header-chat
    width 30Px
    // top 13Px

  .header-left
    position absolute
  .header-title
    margin 0 70Px
    height 44Px
    font-size 16px
    line-height 44Px
    color #333
    width 100%
    text-align center
    font-size 28px
  .header-right
    position absolute
    right 0
    width 50Px
    text-align center
    font-size 24px
</style>
